<template>
  <div class="item" :style="style">
    <div class="imgWrapper">
      <img class="img" :src="meta.cover|| meta.photo" alt="" @click="handleClick">
      <div class="count"></div>
    </div>
    <div class="title no-wrap">{{ meta.title|| meta.name }}</div>
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component";
import {Inject, Prop} from "vue-property-decorator";
import {AlbumItem} from "@/ts.d/classes/AlbumItem";
import {SongListItem} from "@/ts.d/classes/SongListItem";
import {Path} from "@/ts.d/interfaces/Path";
import {Singer} from "@/ts.d/classes/Singer";

@Component({})
export default class AlbumUnit extends Vue {
  @Prop({required: true}) meta!: AlbumItem | SongListItem | Singer

  @Prop({default: 100}) size!: number

  @Prop({default: 10}) margin!: number

  @Inject() redirectTo!: (path: Path) => void

  get style() {
    return {
      width: this.size + "px",
      margin: this.margin + "px"
    }
  }

  handleClick(): void {
    this.redirectTo({
      type: this.meta.type as any ,
      is: this.meta.type.slice(0,1).toUpperCase() + this.meta.type.slice(1) as any,
      mid: this.meta.mid,
      singerName: (this.meta as {name: string}).name
    })
  }

}
</script>

<style scoped lang="scss">
.item {
  display: inline-block;

  .imgWrapper {
    width: 100%;

    .img {
      width: 100%;
      position: relative;
      top: 0;
      transition: all 0.2s;
      cursor: pointer;

      &:hover {
        top: -3px;
      }
    }
  }

}
</style>
